<template>
  <el-dialog title="添加服务商" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"
             :close-on-click-modal="false">
    <el-form :model="addProviderForm" :rules="addProviderRules" ref="addProviderRef" label-width="100px">
      <el-form-item label="账号名" prop="ser_name">
        <el-input v-model="addProviderForm.ser_name" clearable></el-input>
        <span class="err-message" v-if="nameUsed">该账号名已被使用</span>
      </el-form-item>
      <el-form-item label="企业名" prop="ser_cname">
        <el-input v-model="addProviderForm.ser_cname" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="ser_phone">
        <el-input v-model="addProviderForm.ser_phone" clearable></el-input>
        <span class="err-message" v-if="phoneUsed">该手机号已被绑定</span>
      </el-form-item>
      <el-form-item label="邮箱" prop="ser_email">
        <el-input v-model="addProviderForm.ser_email" clearable></el-input>
        <span class="err-message" v-if="emailError">邮箱格式错误</span>
      </el-form-item>
      <el-form-item label="办公地址" prop="ser_address">
        <el-input v-model="addProviderForm.ser_address" clearable></el-input>
      </el-form-item>
      <el-form-item label="注册地址" prop="ser_re_address">
        <el-input v-model="addProviderForm.ser_re_address" clearable></el-input>
      </el-form-item>
      <el-form-item label="公司类型" prop="ser_type">
        <el-select v-model="addProviderForm.ser_type" >
          <el-option label="无限公司" :value="1"></el-option>
          <el-option label="有限责任公司" :value="2"></el-option>
          <el-option label="两合公司" :value="3"></el-option>
          <el-option label="股份有限公司" :value="4"></el-option>
          <el-option label="股份两合公司" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="法定代表人" prop="ser_delegate">
        <el-input v-model="addProviderForm.ser_delegate" clearable></el-input>
      </el-form-item>
      <el-form-item label="注册资本" prop="ser_money">
        <el-input v-model="addProviderForm.ser_money" placeholder="请输入数字，最多保留两位小数"
                  oninput="if(isNaN(value)){value=value.replace(/[^0-9.]/g,'')}
      if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}
      if(value.indexOf('.')>0) {value=value.slice(0,value.indexOf('.')+1)+value.slice(value.indexOf('.')+1).replace(/[.]/g,'');}" clearable></el-input>
      </el-form-item>
      <el-form-item label="注册时间" prop="ser_time">
        <el-date-picker type="date" placeholder="选择日期" v-model="addProviderForm.ser_time" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="账号状态" prop="ser_status">
        <el-select v-model="addProviderForm.ser_status" >
          <el-option label="正常" :value="1"></el-option>
          <el-option label="冻结" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码" prop="ser_pw">
        <el-input v-model="addProviderForm.ser_pw" show-password clearable placeholder="密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="ser_confirm_pw">
        <el-input v-model="addProviderForm.ser_confirm_pw" show-password clearable placeholder="密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAddProvider">添加服务商</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {addService} from '@/network/business/serviceProvider'
export default {
  name: "AddServiceProvider",
  props:{
    addDialogVisible: false
  },
  data(){
    let checkPhone = ((rule,value,callback)=>{   //验证手机号
      if(!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)){
        return callback(new Error('手机号码格式不正确！'));
      }
      return callback();
    })
    let checkPw = ((rule,value,callback)=>{  //验证密码
      if(!/\w{6,20}/.test(value) || !/[0-9]/.test(value) || !/[A-Za-z]/.test(value)) {
        return callback(new Error('密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母'));
      }
      callback();
    })
    let checkConfirmPw = ((rule,value,callback)=>{  //验证确认密码
      if(value!=this.addProviderForm.ser_pw){
        return callback(new Error("两次密码不一致!"));
      }
      if(!/\w{6,20}/.test(value) || !/[0-9]/.test(value) || !/[A-Za-z]/.test(value)) {
        return callback(new Error('密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母'));
      }
      return callback();
    })
    let checkEmail = ((rule,value,callback)=>{  //验证邮箱
      if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value)){
        return callback(new Error('邮箱格式不正确！'));
          }
        return callback();
      })
  return{
    nameUsed: false, //该账号名已被使用
    phoneUsed:false,  //该手机号已被绑定
    emailError: false,  //邮箱格式错误
    addProviderForm:{  //添加服务商表单
      ser_cname:'',  //企业名称",
      ser_name:'',  //账号名",
      ser_pw:'',  //登录密码",
      ser_phone:'', //联系电话",
      ser_email:'', //邮箱",
      ser_address:'', //办公地址",
      ser_re_address:'', //注册地址",
      ser_time:'', //注册时间 (时间要用str类型，不是Date)",
      ser_type:1,  //公司类型,1、无限公司（默认）；2、有限责任公司；3、两合公司；4、股份有限公司；5、股份两合公司
      ser_delegate:'',  //法定代表人",
      ser_money:'', //注册资本,
      ser_status:1 , //账号状态 0冻结；1正常（默认）
      ser_confirm_pw:'' //确认密码
    },
    addProviderRules:{  //添加服务商规则
      ser_name:[
        { required: true, message: '请输入登录名', trigger: 'blur' },],
      ser_cname:[
        { required: true, message: '请输入登录名', trigger: 'blur' }],
        ser_phone:[
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }],
        ser_pw:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          { validator: checkPw, trigger: 'blur' },],
        ser_confirm_pw: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          { validator: checkConfirmPw, trigger: 'blur' }],
        ser_email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }],
      }
    }
  },
  methods:{
    //将提示的信息清除
    closeMessage(){
      this.nameUsed = false;
      this.emailError = false;
      this.phoneUsed = false;
    },
    addDialogClosed(){  //对话框关闭
      this.$emit("addDialogClosed");
    },
    onAddProvider(){  //添加服务商
      this.$refs.addProviderRef.validate(valid=>{
        if(valid){   //验证成功
          addService(this.addProviderForm).then(res=>{
            console.log(res);
            if(res.data.status==200){
              this.$message.success("添加服务商成功！");
              this.$refs.addProviderRef.resetFields();  //将添加表单的数据清空
              //将提示的相关信息清除
              this.closeMessage();
              //通知添加服务商成功
              this.$emit('afterAddingProvider');
            } else if(res.data.status==300){
              this.closeMessage();
              this.nameUsed = true;
              this.$message.error(("该账号名已被使用！"));
            }else if(res.data.status==400){
              this.closeMessage();
              this.phoneUsed = true;
              this.$message.error("该手机号已被绑定！");
            }else if(res.data.status==450){
              this.closeMessage();
              this.emailError = true;
              this.$message.error("邮箱格式错误！");
            }
            else{
              this.$message.error("添加服务商失败，请重新添加！");
            }
          })
        }
        else{  //验证失败
          this.$message.error("请按提示填写表单！");
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
  .err-message{
    color:red;
  }
</style>
